<template>
  <div class="specialSub-container" ref="parent" @click="showMenu = false">
    <div class="specialSub-top">
      <div class="specialSub-search">
        <el-input
          placeholder="请输入你要搜索的专题活动"
          v-model="queryParams.key"
          @keyup.native.enter="search"
          size="small"
          @clear="search"
          clearable
        ></el-input>
        <el-date-picker
          v-model="queryParams.min_create_time"
          style="margin-left: 12px"
          type="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="search"
          size="small"
          placeholder="请选择活动日期"
        ></el-date-picker>

        <el-select
          v-model="queryParams.is_audit"
          placeholder="请选择"
          size="small"
          style="margin-left: 12px"
          @change="search"
        >
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="specialSub-btn">
        <el-button type="primary" size="small" @click="isShowDialog = true">新增</el-button>
      </div>
    </div>

    <el-scrollbar style="height: calc(100vh - 190px)" class="scrollbar" id="scroll-bar">
      <el-table :data="list" @row-contextmenu="contextMenu" v-loading="loading" @expand-change="expandChange">
        <el-table-column label="id" prop="data_id" width="100"></el-table-column>
        <el-table-column label="背景图片" width="150">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.title_page"
              style="width: 100px; height: 40px"
              :src="scope.row.title_page"
              :preview-src-list="[scope.row.title_page]"
              fit="cover"
            ></el-image>
            <span v-else>暂无图片</span>
          </template>
        </el-table-column>
        <el-table-column label="背景图建议尺寸" width="160" prop="size">
          <template>
            <span style="text-align: center">1920 * 520</span>
          </template>
        </el-table-column>
        <el-table-column label="专题活动名称" prop="name"></el-table-column>
        <el-table-column label="开始时间" prop="start_time"></el-table-column>
        <el-table-column label="结束时间" prop="end_time"></el-table-column>
        <el-table-column label="操作" width="450">
          <template slot-scope="scope">
            <el-upload
              action=""
              class="avatar-uploader"
              style="width: 66px; float: left"
              :show-file-list="false"
              :before-upload="
                (file) => {
                  beforeAvatarUpload(file, scope.row.data_id);
                }
              "
            >
              <el-button size="mini">上传</el-button>
            </el-upload>

            <el-button v-if="scope.row.is_audit === 0" type="primary" @click="onAudit(scope.row)" size="mini">
              通过
            </el-button>
            <el-button type="primary" @click="onShowDrawer(scope.row)" size="mini">详情</el-button>
            <el-button type="primary" @click="updSpecialSub(scope.row.data_id, scope.row)" size="mini">修改</el-button>
            <el-button type="danger" @click="delSpecialSub(scope.row.data_id)" size="mini" style="margin-right: 5px">
              删除
            </el-button>
            <el-link type="primary" style="margin: 0 2px" @click="Dialog('Essays', scope.row)">文章</el-link>
            <el-link type="primary" style="margin: 0 2px" @click="Dialog('Collections', scope.row)">锦集</el-link>
            <el-link type="primary" style="margin: 0 2px" @click="Dialog('Videos', scope.row)">视频</el-link>
            <el-link type="primary" style="margin: 0 2px" @click="Dialog('Works', scope.row)">作品</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <paging ref="page" :func="getList"></paging>

    <el-dialog @closed="onClose" title="提示" :visible.sync="isShowDialog">
      <el-form :model="params" :rules="rules" ref="dataParams" label-width="80px" class="demo-dataParams">
        <el-form-item label="名称" prop="name">
          <el-input v-model="params.name"></el-input>
        </el-form-item>
        <el-form-item label="时间" prop="create_time">
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            @change="timesChange"
            value-format="yyyy-MM-dd HH:mm:ss"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="介绍" prop="introduction">
          <el-input type="textarea" v-model="params.introduction"></el-input>
        </el-form-item>
        <!-- <el-form-item label="引用文章">
          <el-autocomplete
            v-for="(m, i) in essays"
            :key="i"
            v-model="m.title"
            :fetch-suggestions="querySearchEssay"
            placeholder="请输入标题"
            @select="selectItem('essays', i, $event)"
            style="margin: 5px"
          >
            <i class="el-icon-delete" style="cursor: pointer" slot="suffix" @click="remove('essays', i)"></i>
          </el-autocomplete>
          <div class="add" @click="add('essays')">
            <i class="el-icon-plus"></i>
          </div>
        </el-form-item>
        <el-form-item label="引用视频">
          <el-autocomplete
            v-for="(m, i) in videos"
            :key="i"
            v-model="m.name"
            :fetch-suggestions="querySearchVideo"
            placeholder="请输入标题"
            @select="selectItem('videos', i, $event)"
            style="margin: 5px"
          >
            <i class="el-icon-delete" style="cursor: pointer" slot="suffix" @click="remove('videos', i)"></i>
          </el-autocomplete>
          <div class="add" @click="add('videos')">
            <i class="el-icon-plus"></i>
          </div>
        </el-form-item>
        <el-form-item label="引用作品">
          <el-autocomplete
            v-for="(m, i) in works"
            :key="i"
            v-model="m.name"
            :fetch-suggestions="querySearchWorks"
            placeholder="请输入标题"
            @select="selectItem('works', i, $event)"
            style="margin: 5px"
          >
            <i class="el-icon-delete" style="cursor: pointer" slot="suffix" @click="remove('works', i)"></i>
          </el-autocomplete>
          <div class="add" @click="add('works')">
            <i class="el-icon-plus"></i>
          </div>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-drawer :title="obj.name" :visible.sync="isShowDrawer" direction="rtl">
      <div class="show-detail">
        <div class="detail-item">
          <div class="item-title">作品详情：</div>
          <div class="item-content">{{ '作品简介:' + obj.introduction }}</div>
          <!-- <div class="item-content">{{ obj }}</div>
          <div class="item-content">{{ obj }}</div>-->
          <div class="item-content">{{ obj }}</div>
        </div>
      </div>
    </el-drawer>

    <el-dialog
      fullscreen
      title="编辑文章"
      :visible.sync="EssaysEditor"
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form
        :model="EssaysParams"
        :rules="EssaysRules"
        ref="EssaysParams"
        label-width="120px"
        class="demo-dataParams"
      >
        <el-form-item label="关联文章">
          <el-select v-model="EssaysParams.x" placeholder="请选择文章" @change="CheckEssays">
            <el-option
              v-for="item in EssayList"
              :key="item.data_id"
              :label="item.title"
              :value="item.data_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="EssaysParams.title" placeholder="请输入作品名"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
          <wangEditor
            v-if="EssaysEditor"
            :content="EssaysParams.content"
            ref="EssaysEditor"
            :key="EssaysParams.data_id"
          ></wangEditor>
        </el-form-item>
        <el-form-item label="是否公开" prop="open">
          <el-select v-model="EssaysParams.open" class="search-select" placeholder="是否公开" size="small">
            <el-option v-for="item in isOpens" :key="item.data_id" :label="item.name" :value="item.data_id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="EssaysEditor = false">取 消</el-button>
        <el-button type="primary" @click="subDialogConfirm">保 存</el-button>
      </span>
    </el-dialog>

    <el-dialog @closed="onClose" title="提示" :visible.sync="CollectionsEditor">
      <el-form
        :model="CollectionsParams"
        :rules="CollectionsRules"
        ref="CollectionsParams"
        label-width="80px"
        class="demo-dataParams"
      >
        <el-form-item label="图片名称" prop="name">
          <el-input v-model="CollectionsParams.name"></el-input>
        </el-form-item>
        <el-form-item label="图片说明" prop="explan">
          <el-input v-model="CollectionsParams.explan"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="CollectionsEditor = false">取 消</el-button>
        <el-button type="primary" @click="subDialogConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog @closed="onClose" title="提示" :visible.sync="VideosEditor">
      <el-form :model="VideosParams" :rules="VideosRules" ref="VideosParams" label-width="80px" class="demo-dataParams">
        <el-form-item label="视频名称" prop="name">
          <el-input v-model="VideosParams.name"></el-input>
        </el-form-item>
        <el-form-item label="视频说明" prop="explan">
          <el-input v-model="VideosParams.explan"></el-input>
        </el-form-item>
        <el-form-item label="视频时间" prop="video_date">
          <el-date-picker v-model="VideosParams.video_date" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="视频作者" prop="video_author">
          <el-input v-model="VideosParams.video_author"></el-input>
        </el-form-item>
        <el-form-item label="关联视频">
          <el-select v-model="VideosParams.x" placeholder="请选择视频" @change="CheckVideos">
            <el-option v-for="item in VideoList" :key="item.data_id" :label="item.video_name" :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="VideosEditor = false">取 消</el-button>
        <el-button type="primary" @click="subDialogConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog @closed="onClose" title="提示" :visible.sync="WorksEditor">
      <el-form :model="WorksParams" :rules="WorksRules" ref="WorksParams" label-width="80px" class="demo-dataParams">
        <el-form-item label="作品名称" prop="work_name">
          <el-input v-model="WorksParams.work_name"></el-input>
        </el-form-item>
        <el-form-item label="作品说明" prop="work_explan">
          <el-input v-model="WorksParams.work_explan"></el-input>
        </el-form-item>
        <el-form-item label="作品类型" prop="work_type">
          <el-input v-model="WorksParams.work_type"></el-input>
        </el-form-item>
        <el-form-item label="作品作者" prop="work_author">
          <el-input v-model="WorksParams.work_author"></el-input>
        </el-form-item>
        <el-form-item label="关联作品">
          <el-select v-model="WorksParams.x" placeholder="请选择作品" @change="CheckWorks">
            <el-option v-for="item in WorkList" :key="item.data_id" :label="item.name" :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="WorksEditor = false">取 消</el-button>
        <el-button type="primary" @click="subDialogConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="dialogTitle" :visible.sync="EssaysDialog" :fullscreen="true">
      <el-row :gutter="20">
        <el-col :span="2" :offset="10"><div style="text-align: center; font-size: 16px">文章</div></el-col>
        <el-col :span="2" :offset="10">
          <div>
            <el-button type="primary" size="small" @click="addSub(activeR, 'Essays')">新增</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table :data="activeR?.EssayList">
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="阅读量" prop="read_count"></el-table-column>

        <el-table-column label="文章类型" prop="type">
          <template slot-scope="scope">
            {{ scope.row.type == 1 ? '普通文章' : '专题文章' }}
          </template>
        </el-table-column>
        <el-table-column label="文章图片">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.show_url_list?.length"
              style="width: 100px; height: 40px"
              :src="scope.row.show_url_list[0]"
              :preview-src-list="scope.row.show_url_list"
              fit="cover"
            ></el-image>
            <span v-else>暂无图片</span>
          </template>
        </el-table-column>

        <el-table-column label="作者" prop="author"></el-table-column>
        <el-table-column label="发布时间" prop="create_time"></el-table-column>
        <el-table-column label="操作" width="420">
          <template slot-scope="scope">
            <!-- <el-button type="primary" @click="onShowDrawer(scope.row)" size="mini">详情</el-button> -->
            <el-button type="primary" @click="subUpd(scope.row, 'Essays')" size="mini">修改</el-button>
            <el-button type="danger" @click="subDel(scope.row.data_id, 'Essays')" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paging ref="EssaysPage" :func="getEssays"></paging>
    </el-dialog>

    <el-dialog :title="dialogTitle" :visible.sync="CollectionsDialog" :fullscreen="true">
      <el-row :gutter="20">
        <el-col :span="2" :offset="10"><div style="text-align: center; font-size: 16px">锦集</div></el-col>
        <el-col :span="2" :offset="10">
          <div>
            <el-button type="primary" size="small" @click="addSub(activeR, 'Collections')">新增</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table :data="activeR?.Collections || []">
        <el-table-column label="图片名称" prop="name">
          <template slot-scope="subScope">
            <el-link type="primary">{{ subScope.row.name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="图片说明" prop="explan">
          <template slot-scope="subScope">
            <el-link type="primary">{{ subScope.row.explan }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="图片" prop="url">
          <template slot-scope="subScope">
            <el-image
              v-if="subScope.row.url"
              style="width: 100px; height: 40px; cursor: pointer"
              :src="subScope.row.url"
              fit="cover"
              :previewSrcList="[subScope.row.url]"
            ></el-image>
            <span v-else>暂无图片</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="420">
          <template slot-scope="scope">
            <el-upload
              action="/ws"
              class="avatar-uploader"
              style="width: 90px; float: left"
              :show-file-list="false"
              :before-upload="
                (file) => {
                  subBeforeAvatarUpload(file, scope.row.data_id, 'Collections');
                }
              "
            >
              <el-button size="mini">上传图片</el-button>
            </el-upload>
            <el-upload
              action="/ws"
              class="avatar-uploader"
              style="width: 90px; float: left"
              :show-file-list="false"
              :before-upload="
                (file) => {
                  subBeforeAvatarUploadBigImage(file, scope.row.data_id, 'updCollections');
                }
              "
            >
              <el-button size="mini">上传大图</el-button>
            </el-upload>
            <!-- <el-button type="primary" @click="onShowDrawer(scope.row)" size="mini">详情</el-button> -->
            <el-button type="primary" @click="subUpd(scope.row, 'Collections')" size="mini">修改</el-button>
            <el-button type="danger" @click="subDel(scope.row.data_id, 'Collections')" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paging ref="CollectionsPage" :func="getCollections"></paging>
    </el-dialog>

    <el-dialog :title="dialogTitle" :visible.sync="VideosDialog" :fullscreen="true">
      <el-row :gutter="20">
        <el-col :span="2" :offset="10"><div style="text-align: center; font-size: 16px">视频</div></el-col>
        <el-col :span="2" :offset="10">
          <div>
            <el-button type="primary" size="small" @click="addSub(activeR, 'Videos')">新增</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table :data="activeR?.Videos || []">
        <el-table-column label="视频名称" prop="name">
          <template slot-scope="subScope">
            <el-link type="primary">{{ subScope.row.name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="视频说明" prop="explan">
          <template slot-scope="subScope">
            <el-link type="primary">{{ subScope.row.explan }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="视频时间" prop="video_date"></el-table-column>
        <el-table-column label="视频作者" prop="video_author">
          <template slot-scope="subScope">
            <el-link type="primary">{{ subScope.row.video_author }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="封面" prop="title_page">
          <template slot-scope="subScope">
            <el-image
              v-if="subScope.row.title_page"
              style="width: 100px; height: 40px; cursor: pointer"
              :src="subScope.row.title_page"
              fit="cover"
              :previewSrcList="[subScope.row.title_page]"
            ></el-image>
            <span v-else>暂无图片</span>
          </template>
        </el-table-column>
        <el-table-column label="视频" prop="url">
          <template slot-scope="subScope">
            <span v-if="subScope.row.url">已上传</span>
            <span v-else>未上传</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="420">
          <template slot-scope="scope">
            <el-upload
              action="/ws"
              class="avatar-uploader"
              style="width: 90px; float: left"
              :show-file-list="false"
              :before-upload="
                (file) => {
                  subBeforeAvatarUpload(file, scope.row.data_id, 'Videos');
                }
              "
            >
              <el-button size="mini">上传封面</el-button>
            </el-upload>
            <el-upload
              action="/ws"
              class="avatar-uploader"
              style="width: 90px; float: left"
              :show-file-list="false"
              :before-upload="
                (file) => {
                  subBeforeAvatarUploadVideo(file, scope.row.data_id);
                }
              "
            >
              <el-button size="mini">上传视频</el-button>
              <el-progress
                v-if="videoFlag && uploadVideoId == scope.row.data_id"
                :percentage="videoUploadPercent"
                style="margin-top: 30px"
              ></el-progress>
            </el-upload>
            <!-- <el-button type="primary" @click="onShowDrawer(scope.row)" size="mini">详情</el-button> -->
            <el-button type="primary" @click="subUpd(scope.row, 'Collections')" size="mini">修改</el-button>
            <el-button type="danger" @click="subDel(scope.row.data_id, 'Collections')" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paging ref="VideosPage" :func="getVideos"></paging>
    </el-dialog>

    <el-dialog :title="dialogTitle" :visible.sync="WorksDialog" :fullscreen="true">
      <el-row :gutter="20">
        <el-col :span="2" :offset="10"><div style="text-align: center; font-size: 16px">作品</div></el-col>
        <el-col :span="2" :offset="10">
          <div>
            <el-button type="primary" size="small" @click="addSub(activeR, 'Works')">新增</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table :data="activeR?.Works || []">
        <el-table-column label="作品名称" prop="work_name">
          <template slot-scope="subScope">
            <el-link type="primary">{{ subScope.row.work_name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="作品说明" prop="work_explan">
          <template slot-scope="subScope">
            <el-link type="primary">{{ subScope.row.work_explan }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="作品类型" prop="work_type"></el-table-column>
        <el-table-column label="作品作者" prop="work_author">
          <template slot-scope="subScope">
            <el-link type="primary">{{ subScope.row.work_author }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="封面" prop="title_page">
          <template slot-scope="subScope">
            <el-image
              v-if="subScope.row.title_page"
              style="width: 100px; height: 40px; cursor: pointer"
              :src="subScope.row.title_page"
              fit="cover"
              :previewSrcList="[subScope.row.title_page]"
            ></el-image>
            <span v-else>暂无图片</span>
          </template>
        </el-table-column>
        <el-table-column label="大图" prop="url">
          <template slot-scope="subScope">
            <el-image
              v-if="!!subScope.row.opus_id && subScope.row.opus_id.length != 0"
              style="width: 100px; height: 40px; cursor: pointer"
              :src="getBigImg(subScope.row.opus_id[0].id)"
              @click="lookBig(subScope.row)"
              fit="cover"
            ></el-image>
            <span v-else>未上传</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="420">
          <template slot-scope="scope">
            <el-upload
              action="/ws"
              class="avatar-uploader"
              style="width: 90px; float: left"
              :show-file-list="false"
              :before-upload="
                (file) => {
                  subBeforeAvatarUpload(file, scope.row.data_id, 'Works');
                }
              "
            >
              <el-button size="mini">上传封面</el-button>
            </el-upload>
            <el-upload
              action="/ws"
              class="avatar-uploader"
              style="width: 90px; float: left"
              :show-file-list="false"
              :before-upload="
                (file) => {
                  subBeforeAvatarUploadBigImage(file, scope.row.data_id, 'updWorks');
                }
              "
            >
              <el-button size="mini">上传大图</el-button>
              <el-progress
                v-if="bigImageFlag && uploadBigImageId == scope.row.data_id"
                :percentage="bigImageUploadPercent"
                style="margin-top: 30px"
              ></el-progress>
            </el-upload>
            <!-- <el-button type="primary" @click="onShowDrawer(scope.row)" size="mini">详情</el-button> -->
            <el-button type="primary" @click="subUpd(scope.row, 'Works')" size="mini">修改</el-button>
            <el-button type="danger" @click="subDel(scope.row.data_id, 'Works')" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paging ref="WorksPage" :func="getWorks"></paging>
    </el-dialog>

    <div class="menu" ref="menu" v-show="showMenu">
      <div @click="move('up')">前移</div>
      <div @click="move('down')">后移</div>
      <div @click="move('top')">置顶</div>
      <div @click="move('bottom')">置底</div>
    </div>
  </div>
</template>

<script>
  import uploadManage from '@/api/upload';
  import specialSubManage from '@/api/specialSub';
  import paging from '@/components/paging';
  import articleManage from '@/api/article';
  import videoManage from '@/api/video';
  import artManage from '@/api/works';
  import wangEditor from '@/components/wangEditor.vue';
  import { getBigImg } from '@/utils/image';
  import { qiniuUploadFile } from '@/utils/QiniuUpload';

  export default {
    components: {
      paging,
      wangEditor,
    },
    data() {
      return {
        list: [],
        value: '',
        queryParams: {
          key: '',
          min_create_time: '',
          is_audit: 1,
        },

        options: [
          {
            value: 1,
            label: '已审核',
          },
          {
            value: 0,
            label: '待审核',
          },
        ],
        isShowDialog: false,
        isShowDrawer: false,
        params: {
          name: '',
          start_time: '',
          end_time: '',
          introduction: '',
        },
        obj: {},
        rules: {
          name: [{ required: true, message: '请输入艺术家名称', trigger: 'blur' }],
          type: [{ required: true, message: '请输入艺术类型', trigger: 'change' }],
        },
        EssaysRules: {
          title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        },
        CollectionsRules: {
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          explan: [{ required: true, message: '请输入说明', trigger: 'blur' }],
        },
        VideosRules: {
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          explan: [{ required: true, message: '请输入说明', trigger: 'blur' }],
          video_date: [{ required: true, message: '请选择时间', trigger: 'change' }],
          video_author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
        },
        WorksRules: {
          work_name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          work_explan: [{ required: true, message: '请输入说明', trigger: 'blur' }],
          work_type: [{ required: true, message: '请输入类型', trigger: 'blur' }],
          work_author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
        },
        updId: '',
        showMenu: false,
        menuId: '',
        essays: [{}],
        videos: [{}],
        works: [{}],
        loading: false,
        activeR: null,
        type: '',
        update: false,
        isOpens: [
          { name: '公开', data_id: 1 },
          { name: '不公开', data_id: 0 },
        ],
        EssaysParams: {
          title: '',
          open: 1,
          content: '',
          show_url_list: [],
        },
        EssaysEditor: false,
        CollectionsParams: {
          name: '',
          explan: '',
        },
        CollectionsEditor: false,
        VideosParams: {
          name: '',
          explan: '',
          video_date: '',
          video_author: '',
        },
        VideosEditor: false,
        WorksParams: {
          work_name: '',
          work_explan: '',
          work_type: '',
          work_author: '',
        },
        WorksEditor: false,

        videoFlag: false,
        uploadVideoId: '',
        videoUploadPercent: 0,

        uploadBigImageId: '',
        bigImageUploadPercent: 0,
        bigImageFlag: true,

        EssaysDialog: false,
        CollectionsDialog: false,
        VideosDialog: false,
        WorksDialog: false,
        dialogTitle: '',

        EssayList: [],
        VideoList: [],
        WorkList: [],
      };
    },
    watch: {
      isShowDialog(nv, ov) {
        if (nv) {
          this.essays = [{}];
          this.works = [{}];
          this.videos = [{}];
        }
      },
      update(nv, ov) {
        debugger;
      },
    },
    mounted() {
      this.refresh();
      articleManage.getArticle().then((res) => {
        this.EssayList = res.item_list;
      });
      videoManage.getVideoType().then((res) => {
        this.VideoList = res.item_list;
      });
      artManage.getArt().then((res) => {
        this.WorkList = res.item_list;
      });
    },
    methods: {
      // 查看大图
      lookBig(data) {
        console.log(data);
        if (data.opus_id && data.opus_id.length > 0) {
          let { BasicDraw, BigImageShow } = require('../../../utils/main');
          let basicDraw = new BasicDraw(); // 创建基础渲染类
          basicDraw.start(); // 开始渲染
          new BigImageShow().showBigImg(data.opus_id[0].id);

          document.getElementById('bigIamgeClose').addEventListener('click', (e) => {
            basicDraw.dispose();
            e.stopPropagation();
          });
        }
      },
      getBigImg,
      add(type) {
        this[type].push({});
      },
      remove(type, i) {
        this[type].splice(i, 1);
      },
      querySearchEssay(queryString, cb) {
        articleManage.getArticle({ key: queryString, notPagination: true }).then((res) => {
          res.item_list.forEach((m) => {
            m.value = m.title;
          });
          cb(res.item_list);
        });
      },
      querySearchVideo(queryString, cb) {
        videoManage.getVideoType({ key: queryString, notPagination: true }).then((res) => {
          res.item_list.forEach((m) => {
            m.value = m.video_name;
          });
          cb(res.item_list);
        });
      },
      querySearchWorks(queryString, cb) {
        artManage.getArt({ key: queryString, notPagination: true }).then((res) => {
          res.item_list.forEach((m) => {
            m.value = m.name;
          });
          cb(res.item_list);
        });
      },
      selectItem(type, i, m) {
        this[type][i].data_id = m.data_id;
      },
      async move(type) {
        await specialSubManage.moveSpecialSub(this.menuId, 'move_' + type);
        this.showMenu = false;
        this.$refs.page.refresh();
      },
      contextMenu(r, column, e) {
        let rect = this.$refs.parent.getBoundingClientRect();
        this.$refs.menu.style.top = e.clientY - rect.top + 'px';
        this.$refs.menu.style.left = e.clientX - rect.left + 'px';
        this.showMenu = true;
        this.menuId = r.data_id;
        e.preventDefault();
      },
      refresh() {
        this.$refs.page.refresh();
      },
      search() {
        this.$refs.page.search();
      },
      timesChange(value) {
        this.params.start_time = value[0] || '';
        this.params.end_time = value[1] || '';
      },
      async onAudit(row) {
        await specialSubManage.updSpecialSub(row.data_id, {
          ...row,
          is_audit: 1,
        });
        this.refresh();
      },
      async onShowDrawer(row) {
        Promise.all([
          specialSubManage.getPictureList(row.data_id, { notPagination: true }),
          specialSubManage.getVideoList(row.data_id, { notPagination: true }),
          specialSubManage.getEssayList(row.data_id, { notPagination: true }),
        ]).then((res) => {
          console.log(res);
          this.obj = { ...row, list: res };
          console.log(this.obj);
          this.isShowDrawer = true;
        });
      },
      getList(callback) {
        this.loading = true;
        specialSubManage.getSpecialSub(this.queryParams).then(async (res) => {
          let total = res.total_count;
          for (let i = 0; i < res.item_list.length; i++) {
            let m = res.item_list[i];
            m.EssayList = [];
            m.Collections = [];
            m.Videos = [];
            m.Works = [];
          }
          this.list = res.item_list;
          this.loading = false;
          callback(this.list, total);
        });
      },
      async beforeAvatarUpload(file, id) {
        let res = await qiniuUploadFile(file, 'special');
        if (res) {
          await specialSubManage.updSpecialSub(id, {
            title_page: res.key,
          });
          this.refresh();
        }
        // const formData = new FormData();
        // formData.append('上传的key值', file);
        // let res = await uploadManage.uploadImage(formData);
        // await specialSubManage.updSpecialSub(id, {
        //   title_page: res,
        // });
        // this.refresh();
      },
      async subBeforeAvatarUpload(file, id, type) {
        let res = await qiniuUploadFile(file, 'special');
        if (res) {
          await specialSubManage[`upd${type}`](id, {
            title_page: res.key,
          });
          this.$refs[`${type}Page`].refresh();
          this.$message.success('上传成功');
        }

        // const formData = new FormData();
        // formData.append('上传的key值', file);
        // await specialSubManage[`upload${type}`](id, formData);
        // this.$refs[`${type}Page`].refresh();
        // this.$message.success('上传成功');
      },
      async subBeforeAvatarUploadVideo(file, id) {
        this.uploadVideoId = id;
        this.videoUploadPercent = 0;
        this.videoFlag = true;

        const timer = setInterval(() => {
          if (this.videoUploadPercent >= 99) {
            this.videoUploadPercent = 100;
            this.videoFlag = false;
            clearInterval(timer);
            return;
          }
          this.videoUploadPercent += 1;
        }, 20);

        let res = await qiniuUploadFile(file, 'special');
        if (res) {
          await specialSubManage.updVideos(id, {
            url: res.key,
          });
          this.$refs[`VideosPage`].refresh();
          this.$message.success('上传成功');
        }

        // const formData = new FormData();
        // formData.append('上传的key值', file);
        // await specialSubManage[`uploadVideosVideo`](id, formData);
        // this.$refs[`VideosPage`].refresh();
        // this.$message.success('上传成功');

        clearInterval(timer);
        this.uploadVideoId = '';
        this.videoUploadPercent = 0;
        this.videoFlag = false;
      },
      async subBeforeAvatarUploadBigImage(file, id, type) {
        this.uploadBigImageId = id;
        this.bigImageUploadPercent = 0;
        this.bigImageFlag = true;

        const timer = setInterval(() => {
          if (this.bigImageUploadPercent >= 99) {
            this.bigImageUploadPercent = 100;
            this.bigImageFlag = false;
            clearInterval(timer);
            return;
          }
          this.bigImageUploadPercent += 1;
        }, 20);

        let res = await qiniuUploadFile(file, 'special');
        if (res) {
          let url = res.key;
          let opus_id = await artManage.imageMap({
            image_list: [
              {
                image_src_url: url,
                image_src_type: 'local',
                image_name: url.split('/')[2],
                type: 1,
                access_type: 0,
                note: '',
              },
            ],
          });
          await specialSubManage[type](id, { opus_id });
          this.$message.success('上传成功');
          this.$refs[`WorksPage`].refresh();
        }

        // const formData = new FormData();
        // formData.append('上传的key值', file);
        // let url = await artManage.uploadMap(formData);
        // let opus_id = await artManage.imageMap({
        //   image_list: [
        //     {
        //       image_src_url: url,
        //       image_src_type: 'local',
        //       image_name: url.split('/')[2],
        //       type: 1,
        //       access_type: 0,
        //       note: '',
        //     },
        //   ],
        // });
        // await specialSubManage[type](id, { opus_id });
        // this.$message.success('上传成功');
        // this.$refs[`WorksPage`].refresh();

        clearInterval(timer);
        this.uploadBigImageId = '';
        this.bigImageUploadPercent = 0;
        this.bigImageFlag = false;
      },
      updSpecialSub(data_id, row) {
        this.isShowDialog = true;
        this.params = row;
        this.value = [row.start_time, row.end_time];
        this.updId = data_id;
        this.$nextTick(() => {
          // this.essays = this.params.EssayList;
          // this.videos = this.params.work_video_list;
          // this.works = this.params.work_list;
          // console.log(this.essays, this.works, this.videos);
        });
      },
      async delSpecialSub(data_id) {
        this.$alert('是否确定删除该专题活动', '删除', {
          confirmButtonText: '确定',
          callback: async (action) => {
            if (action === 'confirm') {
              await specialSubManage.delSpecialSub(data_id);
              this.refresh();
            }
          },
        });
      },
      async dialogConfirm() {
        this.$refs.dataParams.validate(async (valid) => {
          if (valid) {
            let res = null;
            // this.params.essay_list = this.essays;
            // this.params.work_video_list = this.videos;
            // this.params.work_list = this.works;

            if (this.updId) {
              res = await specialSubManage.updSpecialSub(this.updId, {
                ...this.params,
              });
            } else {
              res = await specialSubManage.setSpecialSub({
                ...this.params,
              });
            }
            if (res) {
              this.isShowDialog = false;
              this.updId = '';
              this.refresh();
            }
          }
        });
      },
      onClose() {
        this.params = {
          name: '',
          start_time: '',
          end_time: '',
          introduction: '',
        };
        this.value = [];
        this.updId = '';
        this.update = false;
        this[`${this.type}Params`] = {};
        this.type = '';
      },
      expandChange(r) {
        this.activeR = r;
        this.$nextTick(() => {
          this.$refs.EssaysPage?.refresh();
          this.$refs.CollectionsPage?.refresh();
          this.$refs.VideosPage?.refresh();
          this.$refs.WorksPage?.refresh();
        });
      },
      async getEssays(callback) {
        let res = await specialSubManage.getEssays({ special_id: this.activeR.data_id });
        this.activeR.EssayList = res.item_list;
        callback(res.item_list, res.total_count);
      },
      async getCollections(callback) {
        let res = await specialSubManage.getCollections({ special_id: this.activeR.data_id });
        this.activeR.Collections = res.item_list;
        callback(res.item_list, res.total_count);
      },
      async getVideos(callback) {
        let res = await specialSubManage.getVideos({ special_id: this.activeR.data_id });
        this.activeR.Videos = res.item_list;
        callback(res.item_list, res.total_count);
      },
      async getWorks(callback) {
        let res = await specialSubManage.getWorks({ special_id: this.activeR.data_id });
        this.activeR.Works = res.item_list;
        callback(res.item_list, res.total_count);
      },
      addSub(r, type) {
        this[`${type}Editor`] = true;
        this.type = type;
      },
      async subUpd(r, type) {
        this.type = type;
        switch (this.type) {
          case 'Essays':
            this.EssaysParams = { ...(await specialSubManage.getEssaysDetails(r.data_id)) };
            break;
          default:
            this[`${this.type}Params`] = { ...r };
            break;
        }
        this[`${type}Editor`] = true;
        this.update = true;
      },
      subDel(id, type) {
        this.$alert('是否确定删除？', '删除', {
          confirmButtonText: '确定',
          callback: async (action) => {
            if (action === 'confirm') {
              await specialSubManage[`del${type}`](id);
              this.$refs[`${type}Page`]?.refresh();
            }
          },
        });
      },
      async subDialogConfirm() {
        switch (this.type) {
          case 'Essays':
            this.EssaysParams.show_url_list = this.$refs.EssaysEditor.getImages().map((m) => m.src);
            this.EssaysParams.content = this.$refs.EssaysEditor.getContent();
            if (!this.update) {
              this.EssaysParams.author = this.$store.getters.userInfo.name;
            }
            break;
        }

        let params = `${this.type}Params`;
        delete this[params].x;

        if (this[params].video_date) {
          // 将Date对象转换为yyyy-MM-dd格式
          this[params].video_date = this[params].video_date.toISOString().split('T')[0];
        }

        this[params].special_id = this.activeR.data_id;
        if (this.update) {
          let data_id = this[params].data_id;
          await specialSubManage[`upd${this.type}`](data_id, this[params]);
        } else {
          await specialSubManage[`create${this.type}`](this[params]);
        }
        this[`${this.type}Editor`] = false;
        this.update = false;
        this.$refs[`${this.type}Page`]?.refresh();
      },
      Dialog(type, r) {
        this.activeR = r;
        let map = {
          EssaysDialog: '文章',
          CollectionsDialog: '锦集',
          VideosDialog: '视频',
          WorksDialog: '作品',
        };

        this.dialogTitle = map[type + 'Dialog'];
        this[type + 'Dialog'] = !this[type + 'Dialog'];
        this.$nextTick(() => {
          this.$refs.EssaysPage?.refresh();
          this.$refs.CollectionsPage?.refresh();
          this.$refs.VideosPage?.refresh();
          this.$refs.WorksPage?.refresh();
        });
      },
      CheckEssays(id) {
        articleManage.getArticleInfo(id).then((res) => {
          this.EssaysParams.title = res.title;
          this.$refs.EssaysEditor.setContent(res.content);
          this.EssaysDialog = false;
          this.subDialogConfirm();
        });
      },
      CheckVideos(m) {
        this.VideosParams.video_author = m.art_name;
        this.VideosParams.name = m.video_name;
      },
      CheckWorks(m) {
        artManage.getOneArt(m.data_id).then((res) => {
          console.log(res);
          this.WorksParams.work_name = res.name;
          this.WorksParams.work_explan = res.work_explain;
          this.WorksParams.work_author = res.art_name;
          this.WorksDialog = false;
          this.subDialogConfirm();
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  .subTable {
    display: flex;
    justify-content: space-between;
  }
  .add {
    border: 1px solid #dcdfe6;
    display: inline-block;
    line-height: 10px;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px;
    &:hover {
      color: white;
      background-color: #409eff;
    }
  }
  .menu {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 999;
    & > div {
      padding: 10px 40px;
      border-bottom: 1px solid #eee;
      &:last-child {
        border-bottom: none;
      }
      &:hover {
        cursor: pointer;
        background-color: #409eff;
        color: white;
      }
    }
  }
  .specialSub-container {
    height: 100%;
    .specialSub-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .specialSub-search {
        display: flex;
      }
    }
  }
</style>
